<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useDept } from "./utils/hook";
import AddCoordinate from "@/components/AddCoordinate/index.vue";

const {
  filterStation
} = useDept();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    startstation: null,
    endstation: null,
    speedlevel: null,
    status: 1,
    linetype: null,
    note: "",
    direction: null,
    mapid: null,
    assistList: [{}],
    detailList: []
  }),
  stationSelect: [],
  StatusOptions: [],
  actionType: [],
  SpeedLevelArr: [],
  directionOptions: [],
  mapTypes: [],
  assistSelect: [],
  directions: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const stationSelect = ref(props.stationSelect);
const StatusOptions = ref(props.StatusOptions);
const actionType = ref(props.actionType);
const SpeedLevelArr = ref(props.SpeedLevelArr);
const directionOptions = ref(props.directionOptions);
const mapTypes = ref(props.mapTypes);
const assistSelect = ref(props.assistSelect);
const directions = ref(props.directions);

function getRef() {
  return ruleFormRef.value;
}

function directionChange(val) {
  if (val === 1) {
    if (newFormInline.value.detailList.length !== 1) newFormInline.value.detailList.pop()

    newFormInline.value.detailList[0].startstation = newFormInline.value.startstation
    newFormInline.value.detailList[0].endstation = newFormInline.value.endstation
  } else {
    newFormInline.value.detailList.push({})
    newFormInline.value.detailList[0].startstation = newFormInline.value.startstation
    newFormInline.value.detailList[0].endstation = newFormInline.value.endstation
    newFormInline.value.detailList[1].startstation = newFormInline.value.endstation
    newFormInline.value.detailList[1].endstation = newFormInline.value.startstation
  }
}

defineExpose({ getRef });
</script>

<template>
  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="100px">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="起始站点" prop="startstation">
          <el-select v-model="newFormInline.startstation" placeholder="请选择起始站点" style="width:100%">
            <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
              :value="item.stationid" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="终点站点" prop="endstation">
          <el-select v-model="newFormInline.endstation" placeholder="请选择终点站点" style="width:100%">
            <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
              :value="item.stationid" />
          </el-select>
        </el-form-item>
      </re-col>
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="速度等级" prop="speedlevel">
          <el-select v-model="newFormInline.speedlevel" placeholder="请选择速度等级" style="width:100%">
            <el-option v-for="item in SpeedLevelArr" :key="item.Name" :label="item.Name" :value="item.Name" />
          </el-select>
        </el-form-item>
      </re-col> -->
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="状态" prop="status">
          <el-select v-model="newFormInline.status" placeholder="请选择状态" style="width:100%">
            <el-option v-for="item in StatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="路段类型" prop="linetype">
          <el-select v-model="newFormInline.linetype" placeholder="请选择路段类型" style="width:100%">
            <el-option v-for="item in actionType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="方向" prop="direction">
          <el-select v-model="newFormInline.direction" placeholder="请选择方向" style="width:100%" @change="directionChange">
            <el-option v-for="item in directionOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.linetype === 1 || newFormInline.linetype === 2">
        <el-form-item label="角度" prop="angle">
          <el-input-number v-model="newFormInline.angle" controls-position="right" placeholder="请输入角度" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="所属地图" prop="mapid">
          <el-select v-model="newFormInline.mapid" placeholder="请选择所属地图" style="width:100%">
            <el-option v-for="item in mapTypes" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24" v-show="newFormInline.linetype === 3">
        <el-form-item label="辅助站点" prop="assistList">
          <Add-coordinate :data="newFormInline.assistList"></Add-coordinate>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="路段详情" prop="detailList" class="assiststations">
          <el-table :data="newFormInline.detailList" table-layout="auto" size="small" border class="table">
            <el-table-column label="起点站点" width="100">
              <template #default="scope">
                <el-select v-model="scope.row.startstation" size="small" placeholder="终点" style="width:100%">
                  <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
                    :value="item.stationid" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="终点站点" width="100">
              <template #default="scope">
                <el-select v-model="scope.row.endstation" size="small" placeholder="终点" style="width:100%">
                  <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
                    :value="item.stationid" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template #default="scope">
                <el-select v-model="scope.row.status" size="small" placeholder="状态" style="width:100%">
                  <el-option v-for="item in StatusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="速度等级" width="100">
              <template #default="scope">
                <el-select v-model="scope.row.speedlevel" size="small" placeholder="速度等级" style="width:100%">
                  <el-option v-for="item in SpeedLevelArr" :key="item.Name" :label="item.Name" :value="item.Name" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="行驶方向" width="100">
              <template #default="scope">
                <el-select v-model="scope.row.direction" size="small" placeholder="行驶方向" style="width:100%">
                  <el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="备注">
              <template #default="scope">
                <el-input v-model="scope.row.note" size="small" clearable placeholder="请输入备注" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注" prop="note">
          <el-input v-model="newFormInline.note" clearable placeholder="请输入备注" type="textarea" />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
  margin-right: 16px;
}
.assiststations::v-deep{
  .el-form-item__content{
    overflow-x: auto;
  }
}

.table::v-deep {
  width: 100%;

  .el-table__header {
    width: 100% !important;
  }

  .cell {
    padding: 5px !important;
  }
}
</style>
